<template>
  <div class="add-tags-main">
    <el-form
      ref="ruleFormRef"
      status-icon
      :rules="rules"
      :model="tagsFormData"
      label-width="80px"
      label-position="left"
    >
      <el-form-item label="标签名称" prop="label">
        <el-input v-model="tagsFormData.label" />
      </el-form-item>
      <el-form-item label="描述" prop="descs">
        <el-input v-model="tagsFormData.descs" />
      </el-form-item>
      <el-form-item label="颜色" prop="tags_color">
        <el-input v-model="tagsFormData.tags_color"></el-input>
        <el-color-picker
          v-model="tagsFormData.tags_color"
          show-alpha
          :predefine="predefineColors"
        />
      </el-form-item>
      <el-form-item>
        <el-button color="#6C52EA" @click="handleSave">确认</el-button>
        <el-button @click="handleClose">取消</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tagsTable" :show-header="false" v-loading="loading">
      <el-table-column width="150">
        <template #default="{ row }">
          <el-input placeholder="请输入名称" v-show="!row.tags_show" v-model="row.label"></el-input>
          <span v-show="row.tags_show" :style="{ color: row.tags_color }">{{ row.label }}</span>
        </template>
      </el-table-column>
      <el-table-column width="150">
        <template #default="{ row }">
          <el-input placeholder="请输入描述" v-show="!row.tags_show" v-model="row.desc"></el-input>
          <span v-show="row.tags_show">{{ row.desc }}</span>
        </template>
      </el-table-column>
      <el-table-column width="150">
        <template #default="{ row }">
          <div v-show="!row.tags_show">
            <el-color-picker v-model="row.tags_color" show-alpha :predefine="predefineColors" />
          </div>
          <span v-show="row.tags_show">{{ row.tags_color }}</span>
        </template>
      </el-table-column>
      <el-table-column width="150">
        <template #default="{ row }">
          {{ row.created_at }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120px">
        <template #default="{ row }">
          <el-button link color="#6C52EA" size="small" @click="handleDelete(row)">删除</el-button>
          <el-button v-show="row.tags_show" link color="#6C52EA" size="small" @click="row.tags_show = 0"
            >修改</el-button
          >
          <el-button v-show="!row.tags_show" link color="#6C52EA" size="small" @click="handleEdite(row)"
            >确认</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, h } from 'vue'
import { FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ElNotification } from 'element-plus'

// import { getTagsList, newTagsData, deleteTagsData, editTagsData } from '@/apis/issues/issues-tags'
import { ItagsData } from '../../config/problems'
import { getTagList, newTagData } from '@/apis/system/problems'
import { deepCopy } from '@/utils/tools'

// import { ItagsData } from '@/views/issues/config/issues'
// import { deepCopy } from '@/utils/tools'

const ruleFormRef = ref()

const rules = reactive<FormRules>({
  label: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
})

/**
 * 获取tags数据
 */
const tagsTable = ref()
const arrTable = ref()
const loading = ref(false)
const getData = () => {
  loading.value = true
  getTagList()
    .then((res) => {
      if (!res) return
      arrTable.value = deepCopy(res)
      tagsTable.value = res
      loading.value = false
    })
    .catch(() => {
      ElMessage('服务器内部错误')
    })
}

getData()

const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577'
])

/**
 * 创建tags
 */
const tagsFormData = ref({
  label: '',
  descs: '',
  tags_color: '',
  tags_show: 1
})
const handleSave = () => {
  ruleFormRef.value.validate((valid: boolean) => {
    if (valid) {
      let findSame = tagsTable.value!.some((item: { label: string }) => {
        return item.label === tagsFormData.value.label
      })
      if (!findSame) {
        newTagData(tagsFormData.value)
          .then((res) => {
            if (!res) return
            getData()
            ruleFormRef.value.resetFields()
          })
          .catch(() => {
            ElMessage('服务器内部错误')
          })
      } else {
        ElNotification({
          message: h('i', { style: 'color: teal' }, '标签已存在')
        })
      }
    }
  })
}

/**
 * 删除tags
 */
const handleDelete = (item: ItagsData) => {
  ElMessageBox.confirm(`是否删除名为 ${item.label} 的标签?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    lockScroll: false
  })
    .then(() => {
    //   deleteTagsData(+item.id!).then((res: { data: any; code: number }) => {
    //     if (res.data && res.code !== 200) return
    //     getData()
    //   })
    // })
    // .catch(() => {
    //   ElMessage({
    //     type: 'info',
    //     message: '已取消'
    //   })
    })
}

/**
 * 修改tags
 */
const handleEdite = (item: ItagsData) => {
  item.tags_show = 1
  let findSame = arrTable.value?.some((res: { label: string; desc: string; tags_color: string }) => {
    return res.label === item.label && res.desc === item.desc && res.tags_color === item.tags_color
  })
  if (!findSame && item) {
    // editTagsData(item, +item.id!).then((res: { data: any; code: number }) => {
    //   if (res.data && res.code !== 200) return
    //   getData()
    // })
  }
}

/**
 * 取消
 */
const emit = defineEmits(['add-tagsDialog'])
const handleClose = () => {
  emit('add-tagsDialog')
}
</script>

<style scoped>
:deep(.el-form-item__content) {
  flex-wrap: nowrap;
}
:deep(.el-color-picker) {
  padding-left: 5px;
}
</style>
